/* 专门写到 博客列表页 的专属样式 */

/* 整个 blog 的样式 */
.blog{
    padding: 20px;
}

/* 设置博客的标题 */
.blog .title{
    font-size: 30px;
    text-align: center;
    font-weight: 900;

}

/* 设置博客发布时间 */
.blog .date{
    color: darkgreen;
    text-align: center;
    padding: 15px 0;
}

.blog .desc{
    /* em 是一个单位， 和 px 并列，1 em == 一个文字大小 */
    text-indent: 2em;
}

/* 查看全文 */
.blog a{
    /* 改成块级元素，此时才能设置成尺寸 */
    display: block;
    width: 150px;
    height: 40px;
    border: 2px solid black;

    /* 修改里面的文字、去掉下划线 */
    color: black;
    text-align: center ;
    text-decoration: none;

    /* 当文字的行高与元素高度一样时，文字恰好是垂直居中的 */
    line-height: 40px;

    /* 整个元素水平居中 */
    margin: 10px auto;

    /* 加上背景切换的过渡效果, all 表示针对所有的变化都进行过渡. 2s 意思是过渡的时间是 0.8s */
    transition: all 0.5s;

}

/* hover 是一个 伪类选择器, 不是选中元素, 而是选中元素的某种状态 */
    /* 具体来说, :hover 就是选中了元素被鼠标悬停的状态 */
    .blog a:hover{
        background-color: gray;
        color:white;
    }